<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_模板解析_一般指令</title>
  <style>
    .classA {
      color: red;
    }
    .classB {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!-- 
  一般指令解析
  	1). 得到指令名和指令值(表达式)
  	2). 从data中根据表达式得到对应的值
  	3). 根据指令名确定需要操作元素节点的什么属性
        * v-text---textContent属性
        * v-html---innerHTML属性
        * v-class--className属性
  	4). 将得到的表达式的值设置到对应的属性上
  	5). 移除元素的指令属性
  -->
    <div id="test">
      <p v-text="content"></p>  <!-- p.textContent = value -->
      <p v-html="content"></p> <!-- p.innerHTML = value -->
      <p class="classB" v-class="myClass">xxxxxxx</p> <!-- p.className = 'classB classA' -->
    </div>
  
    <script src="./js/mvvm/compile.js"></script>
    <script src="./js/mvvm/mvvm.js"></script>
    <script src="./js/mvvm/observer.js"></script>
    <script src="./js/mvvm/watcher.js"></script>
    <script>
      new MVVM({
        el: '#test',
        data: {
          content: '<a href="http://www.atguigu.com">去学习</a>',
          myClass: 'classA'
        },
      })
    </script>
</body>
</html>